<template>
	<view class="content font_family">
		<u-sticky offsetTop='0'>
			<view class="menu">
				<u-tabs :list="menu" :current='current' @click="click" lineColor='#EE4133'></u-tabs>
			</view>
		</u-sticky>

		<view class="list" v-if="list.length>0">
			<view class="item" @click="go('/pages/order/zf_order?id='+item.id)" v-for="(item,index) in list"
				:key="index">
				<view class="sh_tag" v-if="item.status==3 && item.sh_status==0">
					审核中
				</view>
				<view class="sh_tag" v-if="item.status==3 && item.refund_status==1">
					已寄出
				</view>
				<view class="sh_tag" v-if="item.bf_refund==1">
					已退款
				</view>
				<view class="top f_z_b">
					<view class="left">
						<text>订单编号：</text>
						<text>{{item.order_no}}</text>
					</view>
					<view class="right">
						{{item.status | order_status}}
					</view>
				</view>
				<view class="sp_item">
					<spbox :list='item.detail' :status='item.status'></spbox>
				</view>
				<!-- <view class="sp_item f" v-for="(sp,sp_index) in item" :key='sp_index'>
					<image src="https://imgs.699pic.com/images/500/295/144.jpg!list2x.v1" mode="aspectFill"></image>
					<view class="sp_msg f_d f_z_b">
						<view class="name text_ellipsis2">
							百味零食大礼包肉味礼盒送礼物办
							百味零食大礼包肉味礼盒送礼物办
						</view>
						<view class="time">
							<text>发货时间：</text>
							<text>卖家承诺15天</text>
						</view>
					</view>
					<view class="price f_d">
						<view class="text">
							￥310.00
						</view>
						<view class="num">
							x1
						</view>
					</view>
				</view> -->
				<!-- <view class="all f_zj" @click="all_check(index)">
					<view class="">
						{{see_all==index?'收起':'全部订单信息'}}
					</view>
					<image v-if="see_all!=index" src="../../static/public/xl.png" mode=""></image>
				</view> -->
				<view class="btn_box f">
					<view class="btn f_zj qx ml_20" v-if="item.status==1" @click.stop="cancel_order(item)">
						取消订单
					</view>
					<!-- <view class="btn f_zj pj ml_20" v-if="item.status==5" @click.stop="go('/pages/order/pl_list')">
						评价
					</view> -->
					<view class="btn f_zj zl ml_20" v-if="item.status==5" @click.stop="zl_order(item)">
						再来一单
					</view>
					<view class="btn f_zj sc ml_20" v-if="item.status==5" @click.stop="sc_order(item.id)">
						删除订单
					</view>
					<!-- <view class="btn f_zj tk ml_20"
						v-if="(item.status==2 || item.status==4 ||item.status==5) && item.sl_c>0"
						@click.stop="tk(item)">
						申请退款
					</view> -->
					<view class="btn f_zj sh ml_20" v-if="item.status==4" @click.stop="qr_sh(item.order_no)">
						确认收货
					</view>
					<!-- <view class="btn f_zj sh ml_20" v-if="item.status==3 && item.sh_status==0">
						审核中
					</view> -->
					<view class=" btn f_zj qx ml_20" v-if="item.status==3 && item.refund_status==0"
						@click.stop="qx_tk(item)">
						取消退款
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else text='没有订单哦~' icon="/static/public/kong.png">
		</u-empty>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { order_list, cancel, cancel_refund, confirm_receipt, del_order, again } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['dl_id'])
		},
		data() {
			return {
				current: 0,
				menu: [
					{ name: '全部', type: 0 },
					{ name: '待付款', type: 1 },
					{ name: '配货中', type: 2 },
					// { name: '待退款' },
					{ name: '已发货', type: 4 },
					{ name: '已完成', type: 5 },
					{ name: '已取消', type: 6 },
				],
				see_all: 'kong',
				list: [],
				query_data: {
					dl: '',
					page: 1,
					status: ''
				},
				more: 'loadmore'
			}
		},
		onLoad(e) {
			if (e.index) {
				this.current = e.index
			}
			this.query_data.dl = this.dl_id
		},
		onShow() {
			this.list = []
			this.query_data.page = 1
			this.get_list()
		},
		onReachBottom() {
			if (this.more == 'loadmore') {
				this.get_list()
			}
		},
		methods: {
			click(e) {
				this.list = []
				this.query_data.page = 1
				this.current = e.index
				this.get_list()
			},
			all_check(index) {
				if (index == this.see_all) {
					this.see_all = 'kong'
				} else {
					this.see_all = index
				}
			},
			get_list() {
				this.query_data.status = this.menu[this.current].type
				order_list(this.query_data).then(res => {
					console.log(res)
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.list = [...this.list, ...res.data.data]
							this.query_data.page += 1
							this.more = 'loadmore'
						} else {
							this.more = 'nomore'
						}
					}
				})
			},
			// 取消订单
			cancel_order(item) {
				let obj = {
					dl: this.dl_id,
					order_no: item.order_no
				}
				cancel(obj).then(res => {
					if (res.code == 1) {
						this.query_data.page = 1
						this.list = []
						this.get_list()
					}
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			},
			tk(item) {
				let sp = JSON.stringify(item.detail)
				this.go(`/pages/order/tk_detail?msg=${sp}&status=${item.status}&order=${item.order_no}`)
			},
			qx_tk(item) {
				uni.showModal({
					title: '提示',
					content: '是否取消退款？',
					success: (res) => {
						if (res.confirm) {
							cancel_refund({ order_no: item.order_no }).then(res => {
								if (res.code == 1) {
									this.query_data.page = 1
									this.list = []
									this.get_list()
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			// 确认收货
			qr_sh(order) {
				let obj = {
					order_no: order
				}
				confirm_receipt(obj).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						this.query_data.page = 1
						this.list = []
						this.get_list()
					}
				})
			},
			// 删除订单
			sc_order(id) {
				del_order({ order_id: id }).then(res => {
					if (res.code == 1) {
						this.query_data.page = 1
						this.list = []
						this.get_list()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 再来一单
			zl_order(item) {
				if (this.dl_id == item.dl_id) {
					again({ order_no: item.order_no }).then(res => {
						if (res.code == 1) {
							uni.showModal({
								content: '确定将本单商品添加到进货单？',
								confirmText: '确定添加',
								confirmColor: 'rgb(69,7,248)',
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/car/car'
										})
									} else if (res.cancel) {}
								}
							})
						}
					})
				} else {
					uni.switchTab({
						url: '/pages/type/type'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		::v-deep .u-tabs__wrapper__nav__item {
			// flex: 1;
		}

		.menu {
			background-color: #FFFFFF;
		}

		.list {
			padding: 30rpx;

			.item {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				position: relative;

				.sh_tag {
					position: absolute;
					bottom: 0rpx;
					left: 0rpx;
					padding: 8rpx 15rpx;
					background-color: #EE4133;
					color: #FFFFFF;
					font-size: 28rpx;
					border-radius: 0rpx 20rpx 0rpx 20rpx;
				}

				.top {
					.left {
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
					}

					.right {
						font-weight: 400;
						font-size: 28rpx;
						color: #EE4133;
					}
				}

				.sp_item {
					margin-top: 20rpx;

					image {
						width: 166rpx;
						height: 144rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}

					.sp_msg {
						margin-left: 15rpx;
						flex: 1;

						.name {
							font-weight: 400;
							font-size: 28rpx;
							color: #232323;
						}

						.time {
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
						}
					}

					.price {
						margin-left: 15rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;

						.num {
							align-self: flex-end;
							margin-top: 15rpx;
						}
					}
				}

				.all {
					margin-top: 15rpx;
					padding: 10rpx 0rpx;
					font-weight: 250;
					font-size: 28rpx;
					color: #999999;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.btn_box {
					margin-top: 30rpx;
					justify-content: flex-end;

					.ml_20 {
						margin-left: 20rpx;
					}

					.btn {
						width: 161rpx;
						height: 61rpx;
						border-radius: 139rpx 139rpx 139rpx 139rpx;
					}

					.pj {
						border: 2rpx solid #FF3434;
						font-weight: 400;
						font-size: 28rpx;
						color: #FF3434;
					}

					.sc {
						border: 2rpx solid #999999;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}

					.zl {
						border: 2rpx solid #60bd95;
						font-weight: 400;
						font-size: 28rpx;
						color: #60bd95;
					}

					.tk {
						background: #707070;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.sh {
						background: #EE4133;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.qx {
						border: 2rpx solid #999999;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>